<script setup lang="ts">
import baocheIcon from '@/static/images/price_description_baoche.png'
import daijiaoIcon from '@/static/images/price_description_daijiao.png'
import shaojianIcon from '@/static/images/price_description_shaojian.png'
import chengjiIcon from '@/static/images/price_description_baoche_chengji.png'

const type = ref<'包车' | '代叫' | '捎件' | '城际购票'>('包车')

onLoad((options) => {
  if (options && options.type)
    type.value = options.type
})

const icon = computed(() => {
  if (type.value === '包车')
    return { src: baocheIcon, size: [167, 149] }
  else if (type.value === '代叫')
    return { src: daijiaoIcon, size: [208, 127] }
  else if (type.value === '捎件')
    return { src: shaojianIcon, size: [201, 130] }
  else if (type.value === '城际购票')
    return { src: chengjiIcon, size: [301, 119] }
})
</script>

<template>
  <view class="px-24rpx">
    <Spacer height="70" />
    <view class="text-30rpx text-#333333 font-bold leading-30rpx">
      {{ `${type}-车费预估` }}
    </view>
    <Spacer height="30" />
    <view class="relative rounded-20rpx bg-white px-30rpx py-58rpx">
      <image
        :src="icon?.src"
        class="absolute right-0"
        :style="{
          top: `-${icon!.size[1]! - 40}rpx`,
          width: `${icon?.size[0]}rpx`,
          height: `${icon?.size[1]}rpx`,
        }"
      />
      <block v-if="type !== '城际购票'">
        <view class="flex items-center justify-between text-28rpx text-#333333 font-medium leading-28rpx">
          <view>起步价</view>
          <view>8.5元</view>
        </view>
        <Spacer height="44" />
        <view class="flex items-center justify-between text-28rpx text-#333333 font-medium leading-28rpx">
          <view>起步公里数</view>
          <view>5公里</view>
        </view>
      </block>
      <block v-if="type === '城际购票'">
        <view class="flex items-center justify-between text-28rpx text-#333333 font-medium leading-28rpx">
          <view>城际线路</view>
          <view>太原-阳泉</view>
        </view>
        <Spacer height="44" />
        <view class="flex items-center justify-between text-28rpx text-#333333 font-medium leading-28rpx">
          <view>乘车人数</view>
          <view>2人</view>
        </view>
      </block>
      <Spacer height="44" />
      <Divider width="642" />
      <Spacer height="44" />
      <view class="flex items-center justify-between text-28rpx text-#333333 font-medium leading-28rpx">
        <view />
        <view>合计14.99元</view>
      </view>
      <Spacer height="44" />
      <view class="flex items-center justify-between text-28rpx text-#FA662F font-medium leading-28rpx">
        <view>优惠券抵扣</view>
        <view class="flex items-center">
          <image
            class="mr-8rpx h-30rpx w-30rpx"
            src="@/static/images/warning_orange_circle.png"
          />
          -4.13元
        </view>
      </view>
      <Spacer height="44" />
      <Divider width="642" />
      <Spacer height="44" />
      <view class="flex items-baseline justify-end">
        <view class="font-meidum text-28rpx text-#333333 leading-28rpx">
          预计支付金额
        </view>
        <view class="text-50rpx text-#333333 font-black leading-50rpx">
          10.78
        </view>
        <view class="font-meidum text-28rpx text-#333333 leading-28rpx">
          元
        </view>
      </view>
    </view>
  </view>
</template>

<route lang="yaml">
name: 'priceDescription'
style:
  navigationBarTitleText: '价格说明'
</route>
